<template>
  <div
    id="recent-posts"
    class="recent-posts"
  >
    <div
      v-for="item in list "
      :key="item.hid"
      class="recent-post-item"
    >
      <div class="post_cover left_radius" v-if="item.images!==''">
        <router-link
          :to="{path:'/posts/'+item.hid}"
          :title="item.title"
        >
          <img
            class="post_bg loaded"
            :alt="item.title"
            src="https://media.gettyimages.com/photos/coding-code-program-compute-coder-develop-developer-development-picture-id655147030?b=1&k=6&m=655147030&s=612x612&w=0&h=DP256uORKyjsxJo6RfSv8cQ9uPSyLj123_DUsG5ehuQ="
            data-ll-status="loaded"
          >
        </router-link>
      </div>
      <div
        class="recent-post-info"
        :style="style"
        v-if="item.images===''? style='width:100%':style='width:55%'"
      >
        <router-link
          class="article-title"
          :to="{path:'/posts/'+item.hid}"
          :title="item.title"
        >
          {{ item.title }}
        </router-link>
        <div class="article-meta-wrap">
          <span
            v-if="item.top"
            class="article-meta"
          >
            <i class="fas fa-thumbtack article-meta__icon sticky" />
            <span class="sticky">置頂</span>
            <span class="article-meta__separator">|</span>
          </span>
          <time class="post-meta__date">
            <span
              class="post-meta__date-created"
              :title="item.createTime|dateTimeFormat"
            >
              <i class="fa fa-calendar" />{{ item.createTime | dateTimeFormat }}
            </span>
            <span class="article-meta__separator">|</span>
            <span
              class="post-meta__date-updated"
              :title="item.updateTime|dateTimeFormat"
            >
              <i class="fa fa-history" />{{ item.updateTime |dateTimeFormat }}
            </span>
          </time>
          <span class="article-meta">
            <span class="article-meta__separator">|</span>
            <i class="fa fa-inbox article-meta__icon" />
            <router-link
              class="article-meta__categories"
              :to="{path:'/categories/'+item.categories}"
            >{{ item.categories }}</router-link>
          </span>
        </div>
        <div class="content">
          {{ item.summary }}
        </div>
      </div>
    </div>
    <nav id="pagination">
      <div class="pagination">
        <pagination :total="total" :limit="listQuery.size" @getNew="fetchData" />
      </div>
    </nav>
  </div>
</template>

<script>
import { getList, articleCategoriesList, articleTagsList } from '@/api/article'
import { parseTime } from '@/utils'
import Pagination from '@/components/Pagination'

export default {
  name: 'Home',
  components: { Pagination },
  data() {
    return {
      list: [],
      total: 0,
      style: '{width:100%}',
      listQuery: {
        page: 0,
        size: 10,
        category: '',
        tag: ''
      }
    }
  },
  filters: {
    dateTimeFormat(date) {
      return parseTime(date, '{y}-{m}-{d}')
    }
  },
  beforeCreate() {
    document.title='小助理'
  },
  created() {
    const category = this.$route.params.categories
    const tag = this.$route.params.tags
    const name = this.$route.name
    if (name === 'categories:category') {
      this.getArticleCategoriesLis(category)
    }
    if (name === 'tags:tag') {
      this.getArticleTagsLis(tag)
    }
    if (name === 'home') {
      this.getData()
    }
  },
  methods: {
    fetchData(v) {
      this.listQuery.page = v === undefined ? 0 : v
      const name = this.$route.name
      const category = this.$route.params.categories
      const tag = this.$route.params.tags
      if (name === 'categories:category') {
        this.getArticleCategoriesLis(category)
      }
      if (name === 'tags:tag') {
        this.getArticleTagsLis(tag)
      }
      if (name === 'home') {
        this.getData()
      }
    },
    getData() {
      getList(this.listQuery).then(response => {
        if (response.data.code === 20000) {
          this.list = response.data.payload.list
          this.total = response.data.payload.total
        }
      })
    },
    getArticleCategoriesLis(category) {
      this.listQuery.category = category
      articleCategoriesList(this.listQuery).then(response => {
        if (response.data.code === 20000) {
          this.$nextTick(() => {
            this.list = response.data.payload.list
            this.total = response.data.payload.total
          })
        }
      })
    },
    getArticleTagsLis(tag) {
      this.listQuery.tag = tag
      articleTagsList(this.listQuery).then(response => {
        if (response.data.code === 20000) {
          this.$nextTick(() => {
            this.list = response.data.payload.list
            this.total = response.data.payload.total
          })
        }
      })
    }
  }
}
</script>
<style>
  .fa-thumbtack:before {
    content: "\f08d";
    font-family: FontAwesome;
  }
</style>
